* {
  padding: 0;
  margin: 0;
}
body {
  background-image: url(../img/cool-background.png);
}
.top-left {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  height: 60px;
  padding-left: 24px;
  border-style: solid;
}
.top-right {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
  height: 60px;
  padding-right: 24px;
  padding-left: 200px;
  border-style: solid;
}
a {
  margin-right: 24px;
  margin-top: 19px;
  display: inline-block;
  position: relative;
}
.mid-right {
  position: absolute;
  right: 20px;
  top: 100px;
  border-radius: 17px;
  background: #eab8b8;
  box-shadow: -6px -6px 12px #e1b1b1, 6px 6px 12px #f3bfbf;
}
.mid-left {
  position: absolute;
  left: 20px;
  top: 100px;
  border-style: solid;
}
.mid-right-audio {
  position: absolute;
  right: 20px;
  top: 320px;
  border-radius: 5px;
  background: #c46464;
  box-shadow: -5px -5px 0px #ae5959, 5px 5px 0px #da6f6f;
}
.bottom-centre {
  position: absolute;
  top: 500px;
  left: 150px;
  border-radius: 21px;
  background: linear-gradient(45deg, #c5a1a1, #eac0c0);
  box-shadow: 6px -6px 2px #d2acac, -6px 6px 2px #e4baba;
}
.bottom-right {
  position: absolute;
  top: 500px;
  right: 100px;
}
#wkl {
  font-size: 20px;
  color: rgb(13, 253, 0);
}
#JP {
  font-size: 20px;
  color: red;
}
